<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- offset demension 偏移量 
    1. 定位父级 offsetParent
    2. offsetLeft offsetTop
    3. offsetHeight  offsetWeight
    -->
    <div id="grandFather" style="position: relative">
        <div id="father">
            <div id="box"></div>
        </div>

    </div>
    <div id="box" style="position: fixed;"></div>

    <script type="text/javascript">
        // 1. 元素自身有fixed定位,offsetParent是null
        var box = document.getElementById('box');
        console.log(box.offsetParent);

        // 2. 元素自身无fixed定位，offsetParent是body
        // 3. 元素自身无定位，父级元素存在定位,offsetParent 是以最近的经过定位的父级
    </script>
    
</body>
</html>